<template>
	<view class="refund-info">
		<popupCard title="退款明细" @close="$emit('close')">
       <scroll-view :scroll-y="true" class="refund-info-content" >
            <!-- <view class="refund-info-content"> -->
              <view class="refund-card" v-for="(item,index) in refundList" :key="index">            
                <view class="header">
                  <view class="time">
                    {{item.createTime}}            
                  </view> 
                  <view class="status">
                    {{ item.refundStatus == 4 ? '取消被驳回':'取消成功'}}            
                  </view>            
                </view> 
                <view class="content">
                  <basic-label-value  label="退款数量" :value="item.subOrders | refundNum" color="#999999" size="26rpx" valueSize="24rpx" valueColor="#333333" />  
                  <basic-label-value  label="退款金额" color="#999999" size="26rpx">
                    <basic-price :price="item.refundAmount" size="24rpx" solor="#333333" />
                  </basic-label-value>  
                  <basic-label-value  label="退款原因" :value="item.refundReason" v-if="!(item.refundStatus == 4)" color="#999999" size="26rpx" valueSize="24rpx" valueColor="#333333" /> 
                  <basic-label-value v-if="item.refundStatus == 3"  label="退款途径" :value="item.refundWay || '-'" color="#999999" size="26rpx" valueSize="24rpx" valueColor="#333333" />  
                  <basic-label-value v-else label="驳回原因" :value="item.refuseReason || '-'" color="#999999" size="26rpx" valueSize="24rpx" valueColor="#333333" />        
                </view>      
              </view>		
            <!-- </view> -->
       </scroll-view>
		</popupCard>
    <basic-safe-area/>
	</view>
</template>
<script>
import popupCard from '@/components/business/popup-card'
export default {
	name: 'refund-info',
	components: { popupCard },
	props: {
		refundList : { type: Array, default:[] }
  },
  filters: {
    refundNum(list){
      let str = ''
      for(let i=0;i<list.length;i++){
        str = str + list[i].skuName+'*'+list[i].refundNum + (i==list.length-1?'':',')
      }
      return str
    }
  },
	methods: {
	}
}
</script>
<style lang="less">
.refund-info{
    width: 100%;
	.refund-info-content{
    width: 100%;
    height: 700rpx;
    padding: 30rpx 30rpx 100rpx;
    box-sizing: border-box;
    background: #F2F2F2;
    .refund-card{
      width: 100%;
      padding: 30rpx;
      box-sizing: border-box;
      background: #FFFFFF;
      border-radius: 8rpx;
      margin-bottom: 30rpx;
      .header{
        border-bottom: 1px solid #EAEAEA;
        padding: 20rpx 0;
         .time{
            color: #999999;
            font-size: 28rpx;
         }
         .status{
            color: #333;
            font-size: 36rpx;            
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            margin-top: 20rpx;
         }
      }
      .content{
        padding-top: 20rpx;
      }
    }
	}
}
</style>